<template>
  <div class="box">
    <div class="list" v-for="(item,index) in address.rows">
      <div class="itemm">
        <div class="name td">{{item.name}}</div>
        <div class="tel td">{{item.phone}}</div>
      </div>
      <div class="address td">{{item.address}}</div>
      <div class="right td">
        <el-button size="mini" class="del" type="danger" icon="el-icon-delete" circle @click="del(item.id)"></el-button>
        <span v-if="item.default==1" style="color: red;" @click="qxmr(item.id)">取消默认地址</span>
        <span v-else @click="sz(item.id)">设为默认地址</span>
      </div>
    </div>
    <!-- <el-button type="primary" icon="el-icon-plus" circle  @click="showbox = !showbox"></el-button> -->
    <!-- <mt-picker :slots="slots" @change="onValuesChange"></mt-picker> -->
    
    <div class="addbtnsc"></div>
    <div class="addbtn" @click="addbtn()">
      新增收货地址
    </div>
    
  </div>
</template>

<script>
// import VDistpicker from 'v-distpicker'
// import s from '@assets/json/address4.json'
import qs from "qs"
import store from '@/vuex/store'
export default {
  name: 'App',
  data(){
    return{
      showbox:false,
      xxdz:'',
      lxdh:'',
      lxr:'',
      zdz:'',
      sjlddz:'',
      adr:'',
      sheng:'',
      address:{},
    }
  },
  methods:{
    // 获取收货地址列表
    getaddress: function(){
      this.$http.post("/index.php/user/address/index",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid

      }))
      .then(res => {
        this.address = res.data
        console.log(this.address)
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    sz:function(i){
      this.$http.post("/index.php/user/address/address_default",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          id: i
      }))
      .then(res => {
        alert('设置成功');
        this.getaddress();
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    qxmr:function(i){
      this.$http.post("/index.php/user/address/cancel_default",qs.stringify({
          // mobile:this.tel,
          // password:this.pwd
          user_id: this.$store.state.userid,
          id: i
      }))
      .then(res => {
        alert('取消成功');
        this.getaddress();
      })
      .catch(error => {
        alert("网络错误")
      });
    },
    del:function(i){
      this.$messagebox.confirm('确定要删除这条地址吗？','提示！',{confirmButtonText:'确定删除',cancelButtonText:'取消'}).then(() => {
          
          this.$http.post("/index.php/user/address/del_address",qs.stringify({
              // mobile:this.tel,
              // password:this.pwd
              user_id: this.$store.state.userid,
              id: i
          }))
          .then(res => {
            this.$toast({
              message: '删除成功',
              iconClass: 'icon iconfont icon-chenggong'
            });
            this.getaddress();
          })
          .catch(error => {
            alert("网络错误")
          });
          
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });          
        });
    },
    addbtn:function(){
      this.$router.push({ name: 'addaddress'})
    },
  },
  created(){
    this.getaddress();
  },
 watch:{
    // "shopcar":{
    //       handler:function(old_val,now_val){
    //         console.log(old_val,now_val);
    //     },
    //     deep: true
    //   },
          '$route' (to, from) {
                // this.getinfo()
               //   const toDepth = to.path.split('/').length
                // const fromDepth = from.path.split('/').length
                // this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
                // console.log(to.name)
                if(to.name == 'shaddress'){
                  this.getaddress();
                }
              }
        }
}
</script>

<style scoped lang="less">
.addbtnsc{
  width: 100%;
  height: .72rem;
}
.addbtn{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  height: .72rem;
  background: #54b84c;
  color: #fff;
  text-align: center;
  line-height: .72rem;
  font-size: .24rem;
}
.box{
  width: 100%;
  zoom: 1;
  height: auto;
  overflow: hidden;
  text-align: center; 
  .list{
    width: 100%;
    height: auto;
    zoom: 1;
    overflow: hidden;
    border-top: .2rem solid #eceef3;
    &:last-child{
      border-bottom: .2rem solid #eceef3;
    }
    .itemm{
      padding: 0 .2rem;
      height: .46rem;
      margin-top: .1rem;
      .name{
        float: left;
        width: 3.8rem;
        height: 100%;
        line-height: .46rem;
        font-size: .24rem;
        color: #333;
      }
      .tel{
        float: right;
        width: 2rem;
        height: 100%;
        font-size: .22rem;
        color: #666;
        line-height: .46rem;
        text-align: right;
      }
    }
    .td{
      text-align: left;
      overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
    }
    .address{
      padding: 0 .2rem;
      font-size: .22rem;
      color: #333;
      line-height: .32rem;
      margin-top: .04rem;
      margin-bottom: .06rem;
    }
    .right{
      padding: 0 .2rem;
      height: 46px;
      border-top: 1px solid #bfbfbf;
      .del{
        float: right;
        margin-right: 20px;
        margin-top: 8px;
      }
      span{
        float: left;
        margin-right: 14px;
        cursor: pointer;
        color: #50b748;
        font-size: 14px;
        line-height: 46px;
      }
    }
  }
}
.showbox{
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0,0,0,.8);
  left: 0;
  top: 0;
  z-index: 9999;
  .boxx{
    position: absolute;
    width: 680px;
    height: 440px;
    background: #fff;
    border-radius: 8px;
    left: 50%;
    margin-left: -340px;
    top: 50%;
    margin-top: -220px;
    .head{
      width: 100%;
      height: 48px;
      text-align: center;
      span{
        line-height: 48px;
        font-size: 16px;
        color: #212121;
        padding-left: 40px;
      }
      .close{
        text-align: right;
        font-size: 20px;
        color: #c12c2c;
        float: right;
        line-height: 48px;
        font-weight: bold;
        padding-right: 20px;
        cursor: pointer;
      }
    }
    .item{
      width: 90%;
      margin: 0px 5% 14px;
      text-align: left;
      label{
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
      }
      input{
        display: block;
        width: 312px;
        height: 40px;
        box-sizing: border-box;
        border: 1px solid rgba(0, 0, 0, 0.15);
        text-indent: 10px;
        font-size: 1rem;
        color: #464a4c;
        border-radius: 4px;
      }
    }
  }
}
</style>
